
// 请求后端列表数据（功能较少）

import { FC, useEffect, useState } from "react";
import { Button, Form, Input, Select, Space, Table } from 'antd';
import { User,PageParams } from '@/type';

import type { ColumnsType } from 'antd/es/table';
import { formatDate } from '@/utils';

import request from '@/api'
const App: FC = () => {
    const [form] = Form.useForm();

    const [userList, setUserList] = useState<User.UserItem[]>();

    const handleSearch = () => {
        console.log("搜索")
    }
    const handleRest = () => {
        console.log("重置")
    }


    const columns: ColumnsType<User.UserItem> = [
        {
            title: '用户ID',
            dataIndex: 'userId',
            key: 'userId'
        },
        {
            title: '用户名称',
            dataIndex: 'userName',
            key: 'userName'
        },
        {
            title: '用户邮箱',
            dataIndex: 'userEmail',
            key: 'userEmail'
        },
        {
            title: '用户角色',
            key: 'role',
            dataIndex: 'role',
            render(role: number) {
                return {
                    0: '超级管理员',
                    1: '管理员',
                    2: '体验管理员',
                    3: '普通用户'
                }[role];
            }
        },
        {
            title: '用户状态',
            key: 'state',
            dataIndex: 'state',
            render(state: number) {
                return {
                    1: '在职',
                    2: '离职',
                    3: '试用期'
                }[state];
            }
        },
        {
            title: '注册时间',
            key: 'createTime',
            dataIndex: 'createTime',
            render: (createTime: Date) => {
                return formatDate(createTime, 'yyyy-MM-dd');
            }
        },
        {
            title: '操作',
            key: 'opration',
            render: record => {
                return (
                    <Space>
                        <Button type='text' onClick={() => handleEditor(record)}>
                            编辑
                        </Button>
                        <Button type='text' danger onClick={handleDelete([record.userId])}>
                            删除
                        </Button>
                    </Space>
                );
            }
        }
    ];
    interface DataType {
        key: React.Key;
        name: string;
        age: number;
        address: string;
    }
    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
    };
    // 编辑
    const handleEditor = (e: User.UserItem) => {
        console.log(e)
    }
    // 删除
    const handleDelete = (_userIds: number[]) => () => {

    }

    // 获取用户列表
    const getUserData = async (_params: PageParams) => {
        const values = form.getFieldsValue();
        const data = await request.getUserList({
            ...values,
            pageNum: 1,
            pageSize: 10
        });
        setUserList(data.list);
    };
    useEffect(() => {
        getUserData({pageNum:1,pageSize:10})
    }, [])
    return (
        <div className="container_wrap">
            <Form
                className='search-form'
                layout='inline'
                initialValues={{
                    state: 1
                }}
                form={form}
            >
                <Form.Item name='userId' label='用户ID'>
                    <Input placeholder='请输入用户ID'></Input>
                </Form.Item>
                <Form.Item name='userName' label='用户名称'>
                    <Input placeholder='请输入用户名称'></Input>
                </Form.Item>
                <Form.Item name='state' label='用户状态'>
                    <Select style={{ width: 120 }}>
                        <Select.Option value={0}>所有</Select.Option>
                        <Select.Option value={1}>在职</Select.Option>
                        <Select.Option value={2}>离职</Select.Option>
                        <Select.Option value={3}>试用期</Select.Option>
                    </Select>
                </Form.Item>
                <Form.Item>
                    <Space>
                        <Button type='primary' className='mr10' onClick={handleSearch}>
                            搜索
                        </Button>
                        <Button type='primary' danger onClick={handleRest}>
                            重置
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
            <div className="base_table">
                <div className="header_wrap">
                    <div className="title">用户列表</div>
                    <div className="action">
                        <Space>
                            <Button type="primary">新增</Button>
                            <Button type="primary" danger>批量删除</Button>
                        </Space>
                    </div>
                </div>

                <Table columns={columns} dataSource={userList} rowSelection={{
                    type: "checkbox",
                    ...rowSelection,
                }} />
            </div>
        </div>
    )
}

export default App